<template>
	<view>
		<view class="form">
			<view class="form_item">
				<view class="label">
					<text>*</text>
					姓名：
				</view>
				<view class="input"><input type="text" placeholder="请输入真实姓名" maxlength="11" v-model="formData.patient_name" /></view>
			</view>
			<view class="form_item">
				<view class="label">
					<text>*</text>
					手机号：
				</view>
				<view class="input"><input type="text" maxlength="11" placeholder="请输入手机号码" v-model="formData.patient_tel" /></view>
			</view>
			<view class="form_item">
				<view class="label">
					<text>*</text>
					性别：
				</view>
				<picker mode="selector" :range="genderList" range-key="label" @change="genderChange">
					<view class="input acea-row row-middle">
						<input type="text" placeholder="请选择" disabled v-model="gender" />
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</picker>
			</view>
			<view class="form_item">
				<view class="label">
					<text>*</text>
					年龄：
				</view>
				<picker mode="date" @change="dateChange" :end="today">
					<view class="input acea-row row-middle">
						<input type="text" placeholder="请选择" disabled v-model="formData.patient_age" />
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</picker>
			</view>
			<view class="form_item">
				<view class="label">
					<text>*</text>
					体重：
				</view>
				<view class="input"><input type="text" placeholder="请输入体重(kg)" v-model="formData.weight" /></view>
			</view>
			<view class="form_item">
				<view class="label">
					<text>*</text>
					身份证：
				</view>
				<view class="input"><input type="idcard" maxlength="18" placeholder="请输入身份证号码" v-model="formData.id_card" /></view>
			</view>
			<view class="form_item">
				<view class="label">用药人和问诊人关系：</view>
				<picker mode="selector" :range="relationList" @change="relationChange">
					<view class="input acea-row row-middle">
						<input type="text" placeholder="请选择" disabled v-model="formData.relation" />
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</picker>
			</view>
			<view class="form_item">
				<view class="label">地址：</view>
				<view class="input"><input type="text" placeholder="请填写地址" v-model="formData.address" /></view>
			</view>
			<view class="form_item">
				<view class="label">设置为默认</view>
				<view class="input" style="height: 40rpx;display: flex;align-items: center;">
					<switch style="transform:scale(0.8)" color="#E93323" :checked="formData.is_default == 0 ? false : true" @change="setDef"></switch>
				</view>
			</view>
		</view>
		<button @click="submitForm" :disabled="isSubmit" class="form_btn">保存</button>
	</view>
</template>

<script>
var _self;
import { createInquiry } from '@/api/user';
export default {
	data() {
		return {
			gender: '',
			genderList: [{ value: 1, label: '男' }, { value: 2, label: '女' }],
			relationList: ['本人', '父母', '配偶', '子女', '其他'],
			formData: {
				patient_name: '',
				patient_tel: '',
				patient_gender: '',
				patient_age: '',
				weight: '',
				id_card: '',
				relation: '',
				address: '',
				is_default: 0
			},
			today: '',
			isSubmit: false
		};
	},
	onLoad() {
		_self = this;
		_self.today = _self.getTime();
	},
	methods: {
		getTime() {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			month >= 1 && month <= 9 ? (month = '0' + month) : '';
			day >= 0 && day <= 9 ? (day = '0' + day) : '';
			var timer = year + '-' + month + '-' + day;
			return timer;
		},
		setDef(e) {
			var val = e.detail.value;
			_self.formData.is_default = val ? 1 : 0;
		},
		genderChange(e) {
			var ind = e.detail.value;
			_self.formData.patient_gender = _self.genderList[ind].value;
			_self.gender = _self.genderList[ind].label;
		},
		relationChange(e) {
			var ind = e.detail.value;
			_self.formData.relation = _self.relationList[ind];
		},
		dateChange(e) {
			var ageArr = _self.getAge(e.detail.value.split('-'));
			if (ageArr[0]) {
				_self.formData.patient_age = ageArr[0];
			} else {
				if (ageArr[1]) {
					_self.formData.patient_age = ageArr[1] + '个月';
				} else {
					_self.formData.patient_age = ageArr[2] + '天';
				}
			}
		},
		getAge(birthday) {
			// 新建日期对象
			let date = new Date();
			// 今天日期，数组，同 birthday
			let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
			// 分别计算年月日差值
			let age = today.map((value, index) => {
				return value - birthday[index];
			});
			// 当天数为负数时，月减 1，天数加上月总天数
			if (age[2] < 0) {
				// 简单获取上个月总天数的方法，不会错
				let lastMonth = new Date(today[0], today[1], 0);
				age[1]--;
				age[2] += lastMonth.getDate();
			}
			// 当月数为负数时，年减 1，月数加上 12
			if (age[1] < 0) {
				age[0]--;
				age[1] += 12;
			}
			return age;
		},
		submitForm() {
			let phoneReg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
			let idReg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
			let nameReg = /^(?:[\u4e00-\u9fa5·]{2,16})$/
			if (!nameReg.test(_self.formData.patient_name)) {
				return _self.$util.Tips({ title: '请输入真实姓名' });
			}
			if (!_self.formData.patient_tel) {
				return _self.$util.Tips({ title: '请输入正确的手机号码' });
			}
			if (!phoneReg.test(_self.formData.patient_tel)) {
				return _self.$util.Tips({ title: '请输入正确的手机号码' });
			}
			if (_self.formData.patient_tel.length != 11) {
				return _self.$util.Tips({ title: '请输入正确的手机号码' });
			}
			if (_self.formData.patient_gender === '') {
				return _self.$util.Tips({ title: '请选择性别' });
			}
			if (!_self.formData.patient_age) {
				return _self.$util.Tips({ title: '请选择年龄' });
			}
			if (!_self.formData.weight) {
				return _self.$util.Tips({ title: '请输入体重' });
			}
			if (!_self.formData.id_card) {
				return _self.$util.Tips({ title: '请输入正确的身份证号码' });
			}
			if (_self.formData.id_card.length != 18) {
				return _self.$util.Tips({ title: '请输入正确的身份证号码' });
			}
			if (!idReg.test(_self.formData.id_card)) {
				return _self.$util.Tips({ title: '请输入正确的身份证号码' });
			}
			_self.isSubmit = true
			createInquiry(_self.formData)
				.then(res => {
					uni.showToast({
						title: res.message,
						mask: true,
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
						uni.$emit('createInquiry');
					}, 1500);
				})
				.catch(err => {
					return _self.$util.Tips({ title: err });
				});
		}
	}
};
</script>

<style lang="scss">
.form {
	background: #fff;
	padding: 0 30rpx;
	.form_item {
		display: flex;
		justify-content: space-between;
		border-bottom: solid 1rpx #dcdcdc;
		font-size: 28rpx;
		padding: 30rpx 0;
		&:last-child {
			border-bottom: none;
		}
		.label {
			text {
				color: $theme-color;
				display: inline-block;
				margin-right: 5rpx;
			}
		}
		.input {
			input {
				text-align: right;
				font-size: 28rpx;
			}
			.iconfont {
				font-size: 20rpx;
				color: #999;
				margin-left: 20rpx;
			}
		}
	}
}
.form_btn {
	background: $theme-color;
	color: #fff;
	width: 690rpx;
	height: 90rpx;
	line-height: 90rpx;
	display: block;
	margin: auto;
	font-size: 28rpx;
	border-radius: 45rpx;
	margin-top: 170rpx;
}
</style>
